<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
      :defined {
        font-style: italic;
      }
      :not(:defined) {
        font-style: normal;
      }
      .red {
        background-color: rgb(180, 22, 22);
      }
      .green {
        background-color: seagreen;
      }
      .blue {
        background-color: rgb(92, 43, 226);
      }
      .yellow {
        background-color: chocolate;
      }
      /* div {
        box-shadow: 0 0 4px -2px black inset;
      } */
    </style>
    <script>
      /**
       * @param {{[key:string]:string|number|boolean}} obj
       * @returns {string}
       */
      function obj2Stylestr(obj) {
        const entries = Object.entries(obj)
          .map(([key, value]) => `${key}:${value};`)
          .join("");
        return entries;
      }
    </script>
  </head>
  <body style="">
    <div id="root" onclick="clickCon(event)">look console</div>
    <word-count id="com" text="12345678" label="长度" onccc="onclickFn(event)"
      ><span>999</span><span>888</span>
    </word-count>
    <ab-cc>999</ab-cc>
    <span class="footer">red footer</span>
    <span class="content">condtne</span>
    <!-- <video></video> -->
    <template id="word-count">
      <div>
        <style>
          ::slotted(span) {
            color: coral;
          }
          :host {
            display: block;
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 5px;
          }
          div {
            color: green;
          }
          .footer {
            color: red;
          }
        </style>
        <slot>world-count</slot>
        <div class="content"></div>
        <div class="footer"></div>
      </div>
    </template>
  </body>

  <script>
    function fnTimmerInactive() {
      window.__tttttt__ = Date.now();
      setInterval(function () {
        var buf = Date.now();
        console.log(
          "time:" + Math.round((buf - window.__tttttt__) / 1000) * 1000
        );
        window.__tttttt__ = buf;
      }, 1000);
    }

    function fnMoniModals() {
      const classNames = ["red", "green", "yellow", "blue"];
      /**
       * @param {number} models 1-4
       * @param {Array<[number,number]>} stageArr. Every item is a [base , random], all value should sum to 100.
       */
      function randomChild(models, stageArr) {
        const divContainer = document.createElement("div");
        divContainer.style = obj2Stylestr({
          height: "60px",
          width: "600px",
          margin: "60px auto 0",
          "background-color": "#ddd",
          position: "relative",
        });

        function percent(n) {
          return Math.floor((n / models) * 100) / 100 + "%";
        }

        let leftStart = 0;
        for (let i = 0; i < stageArr.length; i++) {
          for (let j = 0; j < models; j++) {
            const [b, r] = stageArr[i];
            const w = b + r * Math.random();
            const offSet = (b + r - w) / 2;

            const item = document.createElement("div");
            leftStart += offSet;
            item.style = obj2Stylestr({
              height: "100%",
              position: "absolute",
              left: percent(leftStart),
              width: percent(w),
            });
            leftStart += w + offSet;
            item.className = classNames[j];

            divContainer.appendChild(item);
          }
        }

        document.body.appendChild(divContainer);
      }

      randomChild(3, [
        [10, 15],
        [6, 17],
        [5, 18],
        [5, 17],
        [2, 5],
      ]);
    }

    function fnCustomEle() {
      class WordCount extends HTMLElement {
        constructor() {
          super();
          const shadow = this.attachShadow({ mode: "open" }); // open , closed
          const div = document.createElement("div");
          shadow.appendChild(div);
          const style = document.createElement("style");
          style.textContent = `
          :host {
            display: block;
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 5px;
            color : red;
          }
          .content{
            color:green;
          }
          `;
          // :host-context(.footer) { color : red; }
          div.appendChild(style);

          this.div1 = document.createElement("div");
          this.div2 = document.createElement("div");
          this.div1.className = "content";
          this.div2.className = "footer";
          div.appendChild(this.div1);
          div.appendChild(this.div2);
        }
        eff() {
          const text = this.getAttribute("text");
          const label = this.getAttribute("label");
          this.div1.innerHTML = text;
          this.div2.innerHTML = `${label}:${text.length}`;
        }
        connectedCallback() {
          this.eff();
          console.log("connectedCallback");
        }
        disconnectedCallback() {
          console.log("disconnectedCallback");
        }
        attributeChangedCallback(name, oldValue, newValue) {
          this.eff();
          console.log("attributeChangedCallback", name, oldValue, newValue);
        }
        adoptedCallback() {
          console.log("adoptedCallback");
        }
        // static get observedAttributes() {
        //   return ["text", "label"];
        // }
        static observedAttributes = ["text", "label"];
      }

      // CustomElementRegistry 的内置实例 customElements
      customElements.define("word-count", WordCount);

      // const div = document.getElementById("root");
      // div.innerHTML = '<word-count text="12345678"></word-count>';
      // setTimeout(() => {
      //   // div.innerHTML = '<word-count text="1234567890"></word-count>';
      //   div.innerHTML = "";
      // }, 3000);

      // document.createElement("p", { is: "word-count" });

      const ele = document.getElementById("com");
      setTimeout(() => {
        ele.setAttribute("text", "abcd");
        ele.setAttribute("label", "length");
      }, 2000);
    }

    function fnCustomEle2() {
      // use template
      window.customElements.define(
        "word-count",
        class WordCount extends HTMLElement {
          constructor() {
            super();

            /**@type {HTMLTemplateElement}*/
            const template = document.getElementById("word-count");

            const content = template.content;

            const shadow = this.attachShadow({ mode: "closed" });
            shadow.appendChild(content.cloneNode(true));

            /**@type{HTMLDivElement} */
            this.div1 = shadow.querySelector(".content");
            this.div2 = shadow.querySelector(".footer");

            this.cccEvt = new Event("ccc", { bubbles: false });
          }

          attributeChangedCallback(name, oldValue, newValue) {
            switch (name) {
              case "text":
                this.div1.innerHTML = newValue;
                break;
              case "label":
                this.div2.innerHTML = `${newValue}:${this.div1.innerHTML.length}`;
                break;
              case "onccc":
                this.onccc = newValue;
                break;
            }
          }
          static get observedAttributes() {
            return ["text", "label", "onccc"];
          }

          connectedCallback() {
            this.div1.onclick = (e) => {
              this.dispatchEvent(this.cccEvt);

              if (typeof this.onccc === "function") {
                this.onccc(this.cccEvt);
              } else {
                window.event = this.cccEvt;
                eval(this.onccc);
              }
            };
          }
        }
      );

      window.onclickFn = (e) => {
        console.log("=tag call onclickFn");
      };
      const elem = document.getElementById("com");

      elem.addEventListener("ccc", (e) => {
        console.log("add event listener call==");
      });
      elem.onccc = (e) => {
        console.log("1===ele.onccc");
      };

      setTimeout(() => {
        elem.setAttribute("text", "abcd");
        elem.setAttribute("label", "length");
      }, 2000);
    }

    function fnOn() {
      window.clickCon = (evt) => {
        console.log("tag call win", evt);
      };

      const div = document.getElementById("root");

      div.onclick = (e) => {
        console.log("div.onclick", e);
      };

      setTimeout(() => {
        div.setAttribute("onclick", "clickCon(2)");
      }, 1000);
    }
    fnOn();
    // fnCustomEle2();
    // fnCustomEle();
    // fnTimmerInactive();
    // fnMoniModals();
  </script>
</html>
